<template>
    <div  class="container" @click="handlycick">
     <div class="wraper">
        <swiper :options="swiperOption">
      <swiper-slide v-for="(item , index) of imgs" :key="index.id" ><img
          class="swiper-img"
          :src="item"
        > </swiper-slide>
      <div
        class="swiper-pagination"
        slot="pagination"
      ></div> 
    </swiper>  
     </div>
    </div>
</template>
<script>
export default {
  name:'common',
  props:{
    imgs:{
    type:Array,
    default () {
    return[]
    }
    }
  },
  data () {
      return {
       swiperOption:{
         pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
        observeParents:true,
      observer:true
       }   
      }
  }  
},
methods:{
  handlycick(){
    this.$emit('close')
  }
}

}
</script>
<style lang="stylus" scoped>
.container >>> .swiper-container
  overflow :inherit
.container
    display :flex
    flex-direction :column
    justify-content :center
    position :fixed
    left :0
    right :0
    top:0
    bottom :0
    background :#000
    .wraper
      width :100%
      height :0
      padding-bottom :100%
      .swiper-img
        width :100%
       .swiper-pagination
           color :#fff
           bottom :-1rem


</style>

